 <template>
  <div>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
    />
    <div class=".app">
      <header>
        <div class="head">
          <img
            src=""
            alt=""
            class="con"
          />
          <input
            type="text"
            class="inp"
            placeholder="搜索本店商品"
            v-model="msg"
            @input="seach()"
          />
          <img
            src="https://wq.360buyimg.com/wqshop/shop/search/images/icon_search@2x_30a81d88.png"
            alt=""
            class="seachsrc"
          />
          <p class="dot"><span></span><span></span><span></span></p>
        </div>
        <ul id="nav">
          <li><a href="#" @click="mr" :class="{ re: ist == 1 }">默认</a></li>
          <li><a href="#" @click="xl" :class="{ re: ist == 2 }">销量</a></li>
          <li>
            <a href="#" @click="price(),pr()" :class="{ re: ist == 3 }">价格</a>
          </li>
          <li><a href="#" @click="sx" :class="{ re: ist == 4 }">上新</a></li>
          <li>
            <span></span><img src="./未标题-1.gif" alt="" @click="change()" />
          </li>
        </ul>
      </header>
      <main>
        <div class="bi">
          <div class="par">
            <dl v-for="item in arr" v-if="item.dlshow" :class="{ active: ur }">
              <dt><img :src="item.pic" alt="" :class="{ bd: ur }" /></dt>
              <dd>
                <p class="title" :class="{ t: ur }">{{ item.title }}</p>
                <p class="price" :class="{ p: ur }">
                  ￥{{ item.price }}<span class="mj">满减</span>
                </p>
                <p class="xl" :class="{ x: ur }">
                  {{ item.pj }}条评论<span>好评{{ item.xiaoliang }}</span>
                </p>
              </dd>
            </dl>
          </div>
        </div>
      </main>
      <footer></footer>
    </div>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      arr: [
        {
          title:
            "西铁城(CITIZEN)男士腕表 光动能小蓝针小牛皮表带时尚休闲生活防水商务手表 AO9000-06B七夕情人节礼物 送男友送老公",
          price: "1282.00",
          pic: "https://img13.360buyimg.com/mobilecms/s590x590_jfs/t1/196187/1/16714/305624/610a36ccEf9349195/64f8f711da208f9e.jpg!q70.dpg.webp",
          manjian: true,
          pj: "2000+",
          xiaoliang: "96%",
          time: "1",
          dlshow: true,
          xl: 50000,
          t: false,
          h: 10,
        },
        {
          title:
            "西铁城(CITIZEN)蓝天使男士手表 光动能电波机芯AT8020-03L/AT8020-54L七夕情人节礼物 送男友送老公",
          price: "3760.00",
          pic: "https://img13.360buyimg.com/mobilecms/s590x590_jfs/t1/194054/40/16577/523427/610a000eEa27451d2/24f7b056d28d06bf.jpg!q70.dpg.webp",
          manjian: true,
          pj: "500+",
          xiaoliang: "96%",
          time: "2",
          dlshow: true,
          xl: 80000,
          h: 9,
        },
        {
          title:
            "天王表(TIANWANG)手表 【七夕送男友】昆仑系列钢带机械表商务男士手表情侣表白色GS5876S.D.S.W",
          price: "1399",
          pic: "https://img14.360buyimg.com/n2/s270x270_jfs/t1/199554/32/1753/350997/610c9ec1E43982f9d/2c21fa606477fe19.jpg!q70.dpg",
          manjian: true,
          pj: "50000+",
          xiaoliang: "96%",
          time: "3",
          dlshow: true,
          xl: 300,
          h: 8,
        },
        {
          title:
            "智能手表2021新款男表多功能太空人运动电子表手环防水男士手表学生男腕表【安卓苹果通用】 升级钢带黑【接听拨打电话  运动计步等】",
          price: "288.00",
          pic: "https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/186817/13/9533/156499/60d051d7Ebe810c18/109b553f64b4aea1.jpg!q80.dpg.webp",
          manjian: true,
          pj: "2000+",
          xiaoliang: "92%",
          time: "4",
          dlshow: true,
          xl: 1000,
          h: 7,
        },
        {
          title:
            "特步男鞋跑步鞋2021新款夏季潮流男士厚底旅游透气轻便缓震网面休闲运动鞋黑色板鞋皮面慢跑鞋子夏网鞋 黑色-【店长推荐】 42码",
          price: "128.00",
          pic: "https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/181325/5/17955/392791/610c0805E8b6c1f92/bb1ec332d0fae741.jpg!q80.dpg.webp",
          manjian: true,
          pj: "200+",
          xiaoliang: "98%",
          time: "5",
          dlshow: true,
          xl: 800,
          h: 6,
        },
        {
          title:
            "西铁城(CITIZEN)男士腕表 光动能皮带时尚休闲商务防水手表AW1585-04E七夕情人节礼物 送男友送老公",
          price: "1578.00",
          pic: "https://img13.360buyimg.com/mobilecms/s590x590_jfs/t1/196952/25/1482/449698/610a36c2Eade1b483/0a843e7b4aea90fc.jpg!q70.dpg.webp",
          manjian: true,
          pj: "500+",
          xiaoliang: "94%",
          time: "6",
          dlshow: true,
          xl: 1250,
          h: 5,
        },
        {
          title:
            "西铁城(CITIZEN)男士腕表 礼盒款光动能不锈钢表带绿水鬼表盘游泳防水商务手表 AW1598-70X七夕情人节礼物 送男友送老公",
          price: "1613.00",
          pic: "https://img12.360buyimg.com/mobilecms/s410x410_jfs/t1/186888/30/16908/353342/610a36c9E0d37b783/01d4c73f76a8f3cc.jpg!q70.dpg.webp",
          manjian: true,
          pj: "2000+",
          xiaoliang: "95%",
          time: "7",
          dlshow: true,
          xl: 900,
          h: 4,
        },
        {
          title:
            "西铁城(CITIZEN)女士手表石英机芯不锈钢表带时尚/商务休闲防水手表EQ9063-55A七夕情人节礼物 送女友送老婆",
          price: "899.00",
          pic: "https://img12.360buyimg.com/mobilecms/s410x410_jfs/t1/186744/29/16690/369224/610a3630E13c626a1/c7512bf665f87706.jpg!q70.dpg.webp",
          manjian: true,
          pj: "暂无评价",
          time: "8",
          dlshow: true,
          xl: 1900,
          h: 3,
        },
        {
          title:
            "西铁城(CITIZEN)男士腕表 光动能橡胶皮带运动/时尚防水手表BN2038-01L七夕情人节礼物 送男友送老公",
          price: "4131.00",
          pic: "https://img14.360buyimg.com/mobilecms/s410x410_jfs/t1/180973/4/17785/510498/610a36beE15cc11e0/b1498cdb9052b857.jpg!q70.dpg.webp",
          manjian: true,
          pj: "15",
          xiaoliang: "100%",
          time: "9",
          dlshow: true,
          xl: 50,
          h: 2,
        },
        {
          title:
            "长虹（CHANGHONG) 大3匹 熊猫懒 新能效 变频冷暖 精准控温 空调立式 柜机  KFR-72LW/ZDTTW1+R3 以旧换新",
          price: "3899.00",
          pic: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/200854/35/551/158678/610d1c5fEd258e0f8/408d1a5cde8aedb1.jpg!q70.dpg.webp",
          manjian: true,
          pj: "50+",
          xiaoliang: "96%",
          time: "",
          dlshow: false,
          xl: 30,
          h: 1,
        },
      ],
      ur: false,
      msg: "",
      arrnew: [],
      y: true,
      t: false,
      ist: 0,
      ro:0
    };
  },
  methods: {
    seach() {
      this.arr.forEach((item) => {
        if (this.msg) {
          if (item.title.includes(this.msg)) {
            item.dlshow = true;
          } else {
            item.dlshow = false;
          }
        } else {
          item.dlshow = true;
        }
      });
    },
    jc() {
      this.arr.forEach((u) => {
        if (this.msg.lenght == 0) {
          u.dlshow = true;
        }
      });
    },
    change() {
      this.ur = !this.ur;
    },
    price() {
      this.ist = 3;
      this.t = true;

      this.arr.sort((a, b) => {
        return a.price - b.price 
      });
    },
    pr(){
      console.log("1");
     this.arr.sort((a, b) => {
        return b.price - a.price 
      });
    },
    xl() {
      this.ist = 2;
      this.arr.sort((a, b) => {
        return parseInt(b.pj) - parseInt(a.pj);
      });
    },
    sx() {
      this.ist = 4;
      this.t = true;
      this.arr.sort((a, b) => {
        return a.time - b.time;
      });
    },
    mr() {
      this.arr.sort((a, b) => {
        return a.h - b.h;
      });
      this.ist = 1;
    },
  },
  computed: {},
};
</script>
 <style lang='css'>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}

a,
input,
button {
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  /* 移除点击产生的高亮效果：透明色 */
}
input,
button {
  -webkit-appearance: none;
  /* 在ios中加入这句能修改button和input的宽高 */
}
img,
a {
  -webkit-touch-callout: none;
  /* 禁止长按弹出菜单 */
}
img {
  vertical-align: middle;
}
html,
body,
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 6.5rem;
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 2.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
#nav {
  display: flex;
  height: 3.7rem;
  justify-content: space-between;
  align-items: center;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
.re {
  color: red !important;
  padding-bottom: 2px !important;
  box-sizing: border-box;
  border-bottom: 1px solid red !important ;
}
#nav li {
  display: flex;
}
#nav li a {
  color: #666666;
}
.con {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 10px;
}
.inp {
  height: 30px;
  background: #f7f7f7;
  border-radius: 22px;
  padding-left: 2rem;
  box-sizing: border-box;
}
.inp::placeholder {
  color: #a1a1a1;
}
.seachsrc {
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 95px;
}
.dot {
  width: 2rem;
  height: 1rem;
  margin-right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dot span {
  width: 0.3rem;
  height: 0.3rem;
  background: #646670;
  border-radius: 0.3rem;
}
#nav li:nth-last-of-type(1) {
  width: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#nav li:nth-last-of-type(1) span {
  width: 0.1rem;
  height: 1rem;
  background: #e5e5e5;
}
main {
  flex: 1;
  background: #f7f7f7;
}
.par {
  width: 100%;
  height: 16rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0px 10px 0px 10px;
  box-sizing: border-box;
}
.par dl {
  width: 10.5rem;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  position: relative;
}
.par dl dt {
  width: 100%;
  height: 11rem;
}
.par dl dt img {
  width: 100%;
  height: 100%;
}
.par dl dd {
  width: 100%;
  height: 5rem;
}
.par dl dd .title {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  overflow: hidden;
}
.par dl dd .price {
  display: flex;
  justify-content: space-between;
  width: 7rem;
  height: 1rem;
  color: #ed3b3d;
  line-height: 1rem;
}
.par dl dd .price .mj {
  line-height: 100%;
  font-size: 13px;
  text-align: center;
  border: 1px solid #f19b9d;
  color: #e4393c;
}
.par dl dd .xl {
  display: flex;
  justify-content: space-between;
  width: 10rem;
  font-size: 13px;
  color: #999999;
}
.active {
  width: 100% !important;
  height: 8rem !important;
  position: relative !important;
}
.bd {
  width: 7rem !important;
  height: 7rem !important;
}
.t {
  width: 15rem !important;
  top: 5px !important;
  position: absolute !important;
  right: 0px !important;
}
.p {
  position: absolute !important;
  right: 130px !important;
  top: 50px !important;
}
.x {
  position: absolute !important;
  right: 80px !important;
  top: 75px !important;
}
</style>